<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E特尔诺信息门户网站</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #282c34;
            color: #61dafb;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        .navbar {
            background-color: #212529;
            display: flex;
            align-items: center;
            justify-content: left;
            padding: 15px 20px;
            position: fixed;
            width: 100%;
            z-index: 10;
            gap: 20px;
        }

        .logo {
            width: 50px; /* 设置Logo宽度 */
            height: 50px; /* 设置Logo高度 */
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 30px;
            padding: 0;
            margin: 0;
        }

        nav a {
            color: #61dafb;
            text-decoration: none;
        }

        .sub-menu {
            display: none;
            position: absolute;
            background-color: #212529;
            padding: 10px;
            border: 1px solid #61dafb;
            z-index: 5;
            top: 70px;
            left: 0;
            list-style: none;
            margin: 0;
            padding-left: 0;
        }

        nav li {
            position: relative;
        }

        nav li:hover .sub-menu,
        nav li .sub-menu:hover {
            display: block;
        }

        .sub-menu li {
            padding: 5px 0;
            white-space: nowrap;
        }

        .product-item-display {
            display: flex;
            align-items: center;
        }

        .label {
            display: inline-block;
            margin-right: 10px;
            padding: 2px 5px;
            background-color: #ff4b4b;
            color: #fff;
            border-radius: 3px;
            font-size: 12px;
        }

        .content {
            margin-top: 70px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .typing-container {
            display: flex;
            align-items: center;
            border-right: 2px solid #61dafb;
            padding-right: 5px;
        }

        .highlight {
            color: #ffcc00;
            text-shadow: 0 0 10px rgba(255, 204, 0, 0.7), 0 0 20px rgba(255, 204, 0, 0.5);
        }

        .cursor {
            width: 2px;
            height: 24px;
            background-color: #61dafb;
            animation: blink 0.75s step-end infinite;
        }

        @keyframes blink {
            50% {
                background-color: transparent;
            }
        }

        .additional-content {
            margin-top: 20px;
            color: #61dafb;
            text-align: center;
        }

        .footer {
            text-align: center;
            color: #61dafb;
            margin-top: 20px;
        }

        footer p {
            margin: 0;
        }

        .product-list {
            margin-top: 20px;
            color: #61dafb;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .product-item {
            margin: 10px 0;
            text-align: left;
            border: #61dafb 1px solid;
        }

        .status {
            color: #61dafb;
            font-size: 14px;
        }

        .language-switch {
            background-color: #61dafb;
            border: none;
            color: white;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 5px;
            font-size: 14px;
        }
    </style>
</head>

<body>

    <header class="navbar">
        <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
            <circle cx="25" cy="25" r="20" fill="#ffcc00" />
            <text x="25" y="30" font-size="12" text-anchor="middle" fill="#282c34">E特尔诺</text>
        </svg>
        <nav>
            <ul>
                <li><a href="#lab">实验室</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><button class="language-switch" id="languageSwitch">EN</button> <!-- 语言切换 --></li>
            </ul>
            
        </nav>
    </header>

    <main class="content">
        <div class="typing-container" id="typing">
            <span id="typedText" class="highlight"></span>
            <div class="cursor" id="cursor"></div>
        </div>

        <div class="additional-content">
            <p id="additionalContent">这里可以添加其他内容，例如产品介绍等。</p>
        </div>

        <h2 style="color: #ffcc00; margin-top: 20px;" id="productZoneTitle">产品专区</h2> <!-- 添加标题 -->

        <div class="product-list" id="productList">
            <ul class="sub-menu" id="productMenu"></ul>
        </div>
    </main>

    <footer class="footer">
        <p>&copy; 2023 E特尔诺信息门户网站. 版权所有.</p>
    </footer>

    <script>
        const texts = [
            { zh: "你好，欢迎来到E特尔诺信息门户网站！", en: "Hello, welcome to the E Tech portal!" },
            { zh: "提供优质互联网技术服务！", en: "Providing quality internet technology services!" },
            { zh: "活跃的社区氛围，丰富的产品展示，让您在这里找到所需。", en: "Active community atmosphere, rich product display, find what you need here." },
            { zh: "我们提供专业的技术支持，帮助您解决技术问题。", en: "We provide professional technical support to help you solve technical issues." }
        ];

        let textIndex = 0;
        let charIndex = 0;
        let currentLanguage = 'zh'; // 当前语言
        const typedTextElement = document.getElementById("typedText");
        const cursorElement = document.getElementById("cursor");

        function type() {
            if (charIndex < texts[textIndex][currentLanguage].length) {
                typedTextElement.textContent += texts[textIndex][currentLanguage].charAt(charIndex);
                charIndex++;
                setTimeout(type, 200);
            } else {
                setTimeout(remove, 1000);
            }
        }

        function remove() {
            if (charIndex > 0) {
                typedTextElement.textContent = texts[textIndex][currentLanguage].slice(0, charIndex - 1);
                charIndex--;
                setTimeout(remove, 100);
            } else {
                textIndex = (textIndex + 1) % texts.length;
                setTimeout(type, 1000);
            }
        }

        async function loadProducts() {
            const productListElement = document.getElementById("productList");
            const productMenuElement = document.getElementById("productMenu");
            productListElement.innerHTML = ''; // 清空已有产品
            productMenuElement.innerHTML = ''; // 清空二级菜单

            try {
                const response = await fetch("http://127.0.0.1:8090/etnor/preInfo/products");
                const products = await response.json();
                const formatProducts = products.data;
                for (let i = 0; i < formatProducts.length; i++) {
                    const product = formatProducts[i];
                    // 创建二级菜单项
                    const menuItem = document.createElement("li");
                    menuItem.classList.add("product-item-display");
                    menuItem.innerHTML = `
                        <span class="label" style="display: ${product.hot ? 'inline-block' : 'none'};">热</span>
                        <a href="#${product.name}" onclick="showProductDetails('${product.url}')">
                            ${product.name} - <span class="status">${product.status}</span>
                        </a>
                    `;
                    productMenuElement.appendChild(menuItem);

                    // 创建产品列表项
                    const productItem = document.createElement("div");
                    productItem.classList.add("product-item");
                    productItem.innerHTML = `
                        <span class="label" style="display: ${product.hot ? 'inline-block' : 'none'};">热</span>
                        ${product.name} - ${product.status}
                    `;
                    productListElement.appendChild(productItem);
                }
            } catch (error) {
                console.error('获取产品失败:', error);
            }
        }

        function showProductDetails(url) {
            alert(`显示产品详细信息: ${url}`);
        }

        // 语言切换功能
        document.getElementById("languageSwitch").addEventListener("click", () => {
            currentLanguage = currentLanguage === 'zh' ? 'en' : 'zh';
            document.getElementById("languageSwitch").textContent = currentLanguage === 'zh' ? "EN" : "CH";
            // 更新标题和内容
            document.getElementById("additionalContent").textContent = currentLanguage === 'zh' ? "这里可以添加其他内容，例如产品介绍等。" : "Here you can add other content, such as product introductions.";
            document.getElementById("productZoneTitle").textContent = currentLanguage === 'zh' ? "产品专区" : "Product Zone";
            typedTextElement.textContent = ""; // 重置打字内容
            charIndex = 0; // 重置字符索引
            textIndex = 0; // 重置文本索引
            type(); // 重新打字
        });

        // 开始打字效果
        type();
        loadProducts(); // 初始化时加载所有产品
    </script>

</body>
</html>
